﻿@{
    ViewBag.Title = "系统用户";

}
@{
    var objList = (List<Service.Work.Model.UsersModel>)TempData["Data"];
    int index = 1;
    /*
    var javaSer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var jsonData = javaSer.Serialize(objList);\
     */
}
@section HeadPlugin{

    <!-- Json 表格插件：
        <link href="~/Content/Plugin/pqgrid.min.css" rel="stylesheet" type="text/css">
        <style type="text/css">
        .pq-grid-header-table-div {
            font-size: 14px;
            font-weight: 600;
            background-color: #212121;
            color: gainsboro;
        }
    </style>
        -->
}


<!-- BEGIN PAGE CONTENT-->

<div class="col-md-12">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet box light-grey">
        <div class="portlet-title">
            <div class="caption"><i class="fa fa-globe"></i>查询表单</div><!-- TODO: 动画缩起内容-->
            <div class="tools">
                <a href="javascript:;" class="collapse"></a>
                <a href="http://www.keenthemes.com/preview/metronic_admin/table_managed.html#portlet-config" data-toggle="modal" class="config"></a>
                <a href="javascript:;" class="reload"></a>
                <a href="javascript:;" class="remove"></a>
            </div>
        </div>
        <div class="portlet-body">
            <div class="table-toolbar">
                <div class="btn-group">
                    <button id="sample_editable_1_new" class="btn green">
                        Add New <i class="fa fa-plus"></i>
                    </button>
                </div>
                <div class="btn-group pull-right">
                    <button class="btn dropdown-toggle" data-toggle="dropdown">
                        Tools <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="#">打印</a></li>
                        <li><a href="#">保存为PDF</a></li>
                        <li><a href="#">导出Excel</a></li>
                    </ul>
                </div>
            </div>
            <!-- 表格样式规范：http://v3.bootcss.com/css/#tables -->
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-advance table-hover">

                    <thead>
                        <tr>
                            <th>#</th>
                            <th>名称</th>
                            <th>登录时间</th>
                            <th>最后登录时间</th>
                            <th>帐号</th>
                            <th>生日</th>
                            <th>创建时间</th>
                            <th>邮箱</th>
                            <th>昵称</th>
                            <th>性别</th>
                            <th>类型</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach (var obj in objList)
                        {

                            <tr class="active">
                                <td class="highlight">@Html.Raw(index++)</td>

                                <td>@obj.Name</td>
                                <td>@obj.LoginTime</td>
                                <td>@obj.Mobile</td>
                                <td>@obj.Account</td>
                                <td>@obj.Birthday</td>
                                <td>@obj.CreateTime</td>
                                <td>@obj.Email</td>
                                <td>@obj.NickName</td>
                                <td>@obj.Sex</td>
                                <td>@obj.Type</td>
                                <td>
                                    <a href="#" class="btn default btn-xs purple"><i class="fa fa-edit"></i> 修改</a>
                                    <a href="#" class="btn default btn-xs black"><i class="fa fa-trash-o"></i> 删除</a>
                                    <a href="#" class="btn default btn-xs green-stripe">查看</a>

                                </td>
                            </tr>
                        }

                    </tbody>
                </table>
            </div>
            <!--
                Json 表格插件：
            <div id="sample_1_wrapper" class="dataTables_wrapper form-inline" role="grid" />
            -->
        </div>
    </div>
    <!-- END EXAMPLE TABLE PORTLET-->
</div>


<!-- END PAGE CONTENT-->
@section FootPlugin{
    @* Json 表格插件
                <script src="~/Content/Plugin/pqgrid.min.js" type="text/javascript"></script>
                <script type="text/javascript">
                    var JsonData = Html.Raw(jsonData)
                    $(function () {
                        var data = JsonData;
                        var obj = { title: "有 @objList.Count 个会员已经注册" };
                        obj.width = 'atuo';
                        obj.colModel = [{ title: "<input type='checkbox'>ID", width: 100, dataType: "string", dataIndx: "Id", className: 'col-ti', hidden: true, editable: false },
                            { title: "账户", width: 100, dataType: "string", dataIndx: "Account", editable: false },
                            { title: "昵称", width: 100, dataType: "string", dataIndx: "NickName" },
                            { title: "性别", width: 100, dataType: "string", dataIndx: "Sex" },
                            { title: "生日", width: 100, dataType: "string", dataIndx: "Birthday" },
                            { title: "姓名", width: 100, dataType: "string", dataIndx: "Name" },
                            { title: "手机", width: 100, dataType: "string", dataIndx: "Mobile" },
                            { title: "邮箱", width: 100, dataType: "string", dataIndx: "Email" },
                            { title: "创建时间", width: 100, dataType: "string", dataIndx: "CreateTime" },
                            { title: "最后登录时间", width: 100, dataType: "string", dataIndx: "LoginTime" },
                            { title: "类型", width: 100, dataType: "string", dataIndx: "Type" }];
                        obj.dataModel = {
                            data: data,
                        };
                        $("#sample_1_wrapper").pqGrid(obj);

                    });

                </script>

        }
    *@
}
